<script lang="ts" setup>
import {defineProps, onMounted, reactive, ref} from "vue";
import {requestsongListAllSong} from "../../../utils/axiosURL";

const { coverImgUrl, id, name } = defineProps(["coverImgUrl", "id", "name" ])
// 所有歌曲
const AllSongs = reactive<any>([])


const requestsongListAllSongFn = () => {
  requestsongListAllSong(id).then((data: any) => {
    AllSongs.values = data.songs.slice(0, 5).map((item: any) => item = {...item, vvv: name})
  }).catch(err => {
    console.log(err)
  })
}

onMounted(() => {
  requestsongListAllSongFn()
})


</script>

<template>
  <div class="RinkingLegendItemWrap">
    <div class="leftWrap">
      <RouterLink :to="`/SongListDetail/${id}`">
        <img :src="coverImgUrl" alt="">
      </RouterLink>
    </div>
    <div class="rightDesc">
      <RinkingLegendListItem :songData="AllSongs.values" />
      <p class="viewAll">
        <RouterLink :to="`/SongListDetail/${id}`">
          <span>查看全部</span>
          <span class="iconfont icon-xiangyoujiantou"></span>
        </RouterLink>
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.RinkingLegendItemWrap {
  display: flex;
  width: 100%;
  margin-bottom: 20px;

  .leftWrap {
    flex-basis: 170px;
    height: 170px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .rightDesc {
    flex: 1;
    padding-right: 20px;
    padding-top: 3px;
    margin-left: 30px;
    box-sizing: border-box;

    .viewAll {
      font-family: $activeTextFont;
      color: $font_second_color;
      font-size: $font-size-xs;
      line-height: 33px;
      padding-left: 15px;
      box-sizing: border-box;

      .icon-xiangyoujiantou {
        font-size: $font-size-xs;
      }
    }
  }
}
</style>
